<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";
import btn from "@/utils/buttonInterface";

// 常量
interface response {
  value: string;
}
const tag = "行政区划查询";
const tConsole = tag + "Console";
const winName = "AdministrativeAreaWin";
const provTitle = "省级行政区/省 (prov)";
const cityTitle = "地级行政区/市 (city)";
const distTitle = "县级行政区/区 (dist)";
const townTitle = "乡级行政区/乡 (town)";
const provHolder = "请输入需要查询的(省)...";
const cityHolder = "请输入需要查询的(市)...";
const distHolder = "请输入需要查询的(区)...";
const townHolder = "请输入需要查询的(乡)...";

const selectProvData = ref<string[]>([]);
const selectCityData = ref<string[]>([]);
const selectDistData = ref<string[]>([]);
const selectTownData = ref<string[]>([]);

// 响应式常量 左边显示的ref
const provShow = ref("");
const cityShow = ref("");
const distShow = ref("");
const townShow = ref("");

// 左边被选择的ref
const provSelect = ref("");
const citySelect = ref("");
const distSelect = ref("");
const townSelect = ref("");

const provLoading = ref(false);
const cityLoading = ref(false);
const distLoading = ref(false);
const townLoading = ref(false);
// 事件
// 监听省窗口
watch(
  () => provSelect,
  (newData) => {
    provShow.value = newData.value;
  },
  { deep: true }
);
watch(
  () => citySelect,
  (newData) => {
    cityShow.value = newData.value;
  },
  { deep: true }
);
watch(
  () => distSelect,
  (newData) => {
    distShow.value = newData.value;
  },
  { deep: true }
);
watch(
  () => townSelect,
  (newData) => {
    townShow.value = newData.value;
  },
  { deep: true }
);

// 挂载成功事件
onMounted(() => {
  getProv();
});
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

// function
async function getProv() {
  try {
    // 开启等待
    provLoading.value = true;
    const resolve = await btn.selectProv();
    const date: response = resolve["data"];
    const prov_s = date.value;
    await sleep(500);
    // 关闭等待
    provLoading.value = false;
    if (!prov_s) return;
    selectProvData.value = prov_s.split(",");
  } catch (e) {
    console.log(e);
    return;
  }
}
async function getCity() {
  try {
    // 开启等待
    cityLoading.value = true;
    const resolve = await btn.selectCity(provSelect.value);
    const date: response = resolve["data"];
    const city_s = date.value;
    await sleep(500);
    // 关闭等待
    cityLoading.value = false;
    if (!city_s) return;
    selectCityData.value = city_s.split(",");
  } catch (e) {
    console.log(e);

    return;
  }
}
async function getDist() {
  try {
    // 开启等待
    distLoading.value = true;
    const resolve = await btn.selectDist(provSelect.value, citySelect.value);
    const date: response = resolve["data"];
    const dist_s = date.value;
    await sleep(500);
    // 关闭等待
    distLoading.value = false;
    if (!dist_s) return;
    selectDistData.value = dist_s.split(",");
  } catch (e) {
    console.log(e);
    return;
  }
}
async function getTown() {
  try {
    // 开启等待
    townLoading.value = true;
    const resolve = await btn.selectTown(
      provSelect.value,
      citySelect.value,
      distSelect.value
    );
    const date: response = resolve["data"];
    const town_s = date.value;
    await sleep(500);
    // 关闭等待
    townLoading.value = false;
    if (!town_s) return;
    selectTownData.value = town_s.split(",");
  } catch (e) {
    console.log(e);
    return;
  }
}

function provAction() {
  selectCityData.value = [];
  selectDistData.value = [];
  selectTownData.value = [];
  citySelect.value = "";
  distSelect.value = "";
  townSelect.value = "";
  getCity();
  getDist();
  getTown();
}

function cityAction() {
  selectDistData.value = [];
  selectTownData.value = [];
  distSelect.value = "";
  townSelect.value = "";
  getDist();
  getTown();
}

function distAction() {
  selectTownData.value = [];
  townSelect.value = "";
  getTown();
}
</script>

<template>
  <MainPage>
    <template v-slot:headerTitle>
      <Lv1stTitle :title="tag" />
      <el-button
        style="margin-left: auto"
        type="primary"
        round
        :icon="QuestionFilled"
        >{{ tag }}</el-button
      >
    </template>
    <template v-slot:decoration>
      <TopBar :Tag="tConsole" />
    </template>
    <template v-slot:contents>
      <ContentsNoInput>
        <template v-slot:main>
          <el-aside class="AdminAreaWin_aside">
            <PCDT_ShowCards>
              <template v-slot:cards>
                <PCDT_ShowCard :card-title="provTitle" :card-value="provShow" />
                <PCDT_ShowCard :card-title="cityTitle" :card-value="cityShow" />
                <PCDT_ShowCard :card-title="distTitle" :card-value="distShow" />
                <PCDT_ShowCard :card-title="townTitle" :card-value="townShow" />
              </template>
            </PCDT_ShowCards>
          </el-aside>
          <el-main class="AdminAreaWin_main">
            <el-space wrap alignment="stretch" class="AdminAreaWin_sp1">
              <PCDT_SearchCard
                :card-title="provTitle"
                :placeholder="provHolder"
                :content-date="selectProvData"
                :event-function="provAction"
                v-model:selectResult="provSelect"
                :loading-flag="provLoading"
              />
              <PCDT_SearchCard
                :card-title="cityTitle"
                :placeholder="cityHolder"
                :content-date="selectCityData"
                :event-function="cityAction"
                v-model:selectResult="citySelect"
                :loading-flag="cityLoading"
              />
              <PCDT_SearchCard
                :card-title="distTitle"
                :placeholder="distHolder"
                :content-date="selectDistData"
                :event-function="distAction"
                v-model:selectResult="distSelect"
                :loading-flag="distLoading"
              />
              <PCDT_SearchCard
                :card-title="townTitle"
                :placeholder="townHolder"
                :content-date="selectTownData"
                v-model:selectResult="townSelect"
                :loading-flag="townLoading"
              />
            </el-space>
          </el-main>
        </template>
      </ContentsNoInput>
    </template>
  </MainPage>
</template>

<style scoped>
.AdminAreaWin_aside {
  display: flex;
  width: 30%;
  justify-content: center;
  align-content: center;
}

.AdminAreaWin_sp1 {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
}

.AdminAreaWin_main {
  width: 100%;
  height: 100%;
}
</style>
